<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../../css/register.css"/>
	</head>
	<body>
		<div id="app">
			<header >
				<van-nav-bar @click-left="onClickLeft" style="background-color: red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" class="white">注册用户</label>
				</van-nav-bar>
			</header>
			<section>
				<van-row class="padding">
					<van-col span="24" class="centers padding">  
						<van-cell-group>
							<van-field
							    v-model.lazy="phone"
							    placeholder="请输入手机号"
							    :error-message="phoneMsg"/>
						</van-cell-group>
					</van-col>
				  	<van-col span="16" class="centers padding">  
				  		<van-cell-group>
				  			<van-field
							    v-model.lazy="verifi"
							    placeholder="验证码(6位数字短信验证码)"
							    :error-message="verMsg"/>
				  		</van-cell-group>
					</van-col>
					<van-col span="8" class="centers">  
						<van-button type="danger" :disabled="dis" :text="val" @click="send"></van-button>
					</van-col>
					<van-col span="24" class="centers padding">  					
						<van-cell-group>
							<van-field
							    v-model.lazy="pwd"
								right-icon="eye-o"
							    :type="password"
							    placeholder="登录密码(最少6位)"
							    :error-message="pwdMsg"
								@click-right-icon="shows"/>
						</van-cell-group>
					</van-col>
					<van-col span="24" class="centers padding">  
						<van-cell-group>
							<van-field
							    v-model.lazy="pwds"
								right-icon="eye-o"
							    :type="password1"
							    placeholder="确认密码(再次输入登录密码)"
							    :error-message="pwdsMsg"
								@click-right-icon="shows1"/>
						</van-cell-group>
					</van-col>
					<van-col span="24" class="centers padding">  
						<van-cell-group>
							<van-field
							    v-model.lazy="name"
							    placeholder="昵称(最多20个词)"
							    :error-message="nameMsg"/>
						</van-cell-group>
					</van-col>
					<van-col span="24" class="centers padding">  
						<van-cell v-model="address" title="县/区" @click="isArea"></van-cell>
						<van-popup v-model="show" position="bottom">
							<van-area :area-list="areaList" :columns-num="3" title="地址" :value="addressNum" @cancel="exit" @confirm="sure" @change="onChange"></van-area>
						</van-popup>						
					</van-col>
					<van-col span="24" class="centers padding size">  
						注册会员即表示同意<a href="#">《京东用户注册协议》</a>
					</van-col>
					<van-col span="24" class="centers padding">  
						<van-button type="danger" size="large" @click="btn">立即注册</van-button>
					</van-col>
				</van-row>
			</section>
		</div>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/area.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/tuichu.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					password:"password",
					password1:"password",
					show: false,
					phoneMsg:"",
					verMsg:"",
					pwdMsg:"",
					pwdsMsg:"",
					nameMsg:"",
					addressNum:"",
					phone:"",
					verifi:"",
					pwd:"",
					pwds:"",
					name:"",
					address:"",
					areaList: arealist, //地址数组
					val:"获取验证码",
					dis:false,
				},
				methods:{
					shows:function(){
						this.password = this.password === 'password' ? 'text' : 'password';
					},
					shows1:function(){
						this.password1 = this.password1 === 'password' ? 'text' : 'password';
					},
					exit: function() { //取消
						this.show = false;
					},
					sure: function(area) { //确定
						var _this = this;
						console.log(area);
						for(var i=0;i<area.length;i++){
							_this.address += area[i].name;
							_this.addressNum=area[i].code;
						}
						this.show = false;
						console.log(_this.addressNum);
					},
					onChange:function(){
						this.address="";
					},
					isArea: function() {
						this.show = true;
					},
					onClickLeft:function() {
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
					},
					send:function(){
						var _this=this;
						ajax({ //登录
							url: "http://dsapi.ysd3g.com/API/SendRegisterPhoneCode",
							dataType: "jsonp",
							data: {
								phone: _this.phone
							},
							success: function(res) {
								if(res.Error){
									app.$toast.fail(res.Msg);
								}else{
									_this.$dialog.confirm({
										title: '验证码',
										message: res.Code,
										confirmButtonText: '复制'
									}).then(() => {
										//复制
										app.verifi=res.Code;
										_this.getSecond(60);
									}).catch(() => {
										//取消
										_this.getSecond(60);
									});
								}
							}
						});
					},
					getSecond:function(time){
						let _this=this;
						let  _time= time;
						if (_time==0) {
							_this.dis=false;
							_this.val="获取验证码";
							time=_time;
						}else{
							_this.dis=true;
							_this.val=time+"s 后重试";
							time--;
							setTimeout(() => {
								_this.getSecond(time);
							}, 1000)
						}
					},
					btn:function(){
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/API/UserRegister",
							dataType: "jsonp",
							data: {
								phone: _this.phone, //电话号码
								code: _this.verifi, //验证码
								password: _this.pwd, //密码
								nickName: _this.name, //用户名称
								districtCode: _this.addressNum, //地区编号
							},
							success: function(res) {
								if (res.Error == false) {
									_this.$dialog.alert({
										title: '注册成功',
									}).then(() => {
										//点击确定跳转登录页面
										plus.webview.close(plus.webview.currentWebview(),"slide-out-left");
										plus.webview.open("login.html", "login");
									})
								} else {
									app.$toast("注册失败");
								}
							}
						})
					}
				},
				watch:{
  					phone(newPhone, oldPhone) {
  						if(!(/^1[34578]\d{9}$/.test(newPhone))){
  							this.phoneMsg="手机号格式错误";
  						}else{
  							this.phoneMsg="";
  						}
					},
					verifi(newVer, oldVer) {
  						if(!(/^\d{6}$/.test(newVer))){
  							this.verMsg="验证码错误";
  						}else{
  							this.verMsg="";
  						}
					},
					pwd(newPwd, oldPwd) {
  						if(!(/^(\w){6,16}$/.test(newPwd))){
  							this.pwdMsg="密码必须在6-16位之间";
  						}else{
  							this.pwdMsg="";
  						}
					},
					pwds(newPwds, oldPwds) {
  						if(newPwds!=this.pwd){
  							this.pwdsMsg="两次密码不一致";
  						}else{
  							this.pwdsMsg="";
  						}
					},
					name(newName, oldName) {
  						if(!(/^.{0,20}$/.test(newName))){
  							this.nameMsg="昵称最多20个字";
  						}else{
  							this.nameMsg="";
  						}
					},
  				}
			});
		</script>
	</body>
</html>